<template>
  <view class="container">
    <view class="points-summary">
      <view class="points-circle">{{ points }}</view>
      <view class="points-label">可用积分</view>
      <text class="points-shop">积分商城</text>
    </view>

    <view class="tabs">
      <view :class="{ active: activeTab === 'detail' }" @click="activeTab = 'detail'">积分明细</view>
      <view :class="{ active: activeTab === 'tasks' }" @click="activeTab = 'tasks'">积分任务</view>
    </view>

    <view v-if="activeTab === 'detail'" class="detail-list">
      <view v-for="(item, index) in details" :key="index" class="detail-item">
        <view>
          <view class="item-description">{{ item.description }}</view>
          <view class="item-date">{{ item.date }}</view>
        </view>
        <view :class="{ positive: item.points > 0, negative: item.points < 0 }" class="item-points">
          {{ item.points }}
        </view>
      </view>
    </view>

    <view v-if="activeTab === 'tasks'" class="task-list">
      <view v-for="(task, index) in tasks" :key="index" class="task-item">
        <view class="task-info">
          <text>{{ task.title }}</text>
          <text class="task-subtitle">{{ task.subtitle }}</text>
        </view>
        <button class="task-button" :class="{ completed: task.completed }">
          {{ task.completed ? '已完成' : '去完成' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      points: 666,
      activeTab: 'detail',
      details: [
        { description: '积分兑换', date: '2023-01-12 15:00', points: -2000 },
        { description: '图书阅读', date: '2023-01-12 15:00', points: +10 },
        { description: '图书阅读', date: '2023-01-12 15:00', points: +10 },
        { description: '图书阅读', date: '2023-01-12 15:00', points: +10 },
      ],
      tasks: [
        { title: '每天签到', subtitle: '每天登录即可获得积分', completed: false },
        { title: '邀请好友', subtitle: '邀请好友即可获得积分', completed: true },
        { title: '关注公众号', subtitle: '关注公众号即可获得积分', completed: true },
      ],
    };
  },
};
</script>

<style>
.container {
  padding: 16px;
}

.points-summary {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.points-circle {
  font-size: 24px;
  font-weight: bold;
}

.points-label {
  margin-top: 8px;
  font-size: 16px;
}

.points-shop {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 14px;
  color: blue;
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 16px;
  border-bottom: 1px solid #ddd;
}

.tabs view {
  padding: 8px;
  cursor: pointer;
}

.tabs .active {
  border-bottom: 2px solid blue;
  color: blue;
}

.detail-list,
.task-list {
  background-color: #f9f9f9;
  padding: 8px;
}

.detail-item,
.task-item {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.item-description,
.item-date,
.task-info {
  flex: 1;
}

.item-points,
.task-button {
  flex: 0.5;
  text-align: right;
  margin-left: 10px;
}

.positive {
  color: green;
}

.negative {
  color: red;
}

.task-button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

.task-button.completed {
  background-color: #ccc;
  color: #666;
}
</style>
